<?php include(BASE_PATH . "/view/layout/admin.phtml"); ?>
<link rel="stylesheet" type="text/css" href="/css/common/city.css" />
<script type="text/javascript" src="/js/common/Popt.js"></script>
<script type="text/javascript" src="/js/common/cityJson.js"></script>
<script type="text/javascript" src="/js/common/citySet.js"></script>
<style>
.sideContent{padding: 60px;}
.header{height: 40px;background: #F2F2F2;padding-left: 20px;padding-top: 11px;}
.btn-cont{text-align: right;margin-bottom: 20px;}
._citys{width: 397px;}
.add-model{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: none;
}
.add-zhe{
    position: absolute;
    background: rgba(0,0,0,0.3);
    height: 100%;
    width: 100%;
}
.add-input{
    position: absolute;
    left: 50%;
    top: 10%;
    width: 700px;
    height: 400px;
    margin-left: -350px;
    z-index: 99;
    background: white;
    padding: 20px;
    border-radius: 5px;
    padding-top: 55px;
}
.input-group{width: 100%;margin-bottom: 15px;}
.input-group input[type='text']{
    border-radius: 3px;
    border: 1px solid #bfbfbf;
    color: gray;
    width: 230px;
    height: 32px;
    padding-left: 10px;
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0);
}
.input-group input:hover{
    border: 1px solid;
}
.sfi{
    position: absolute;
    right: 10px;
    top: 3px;
    letter-spacing: 2px;
}
#textCity{
    cursor: pointer;
}
.add-btn-cont{
    text-align: center;
}
.add-btn-cont .btn{width: 75px;}

.table th,td{text-align: center;}
.rowLabel{width: 50%;font-weight: normal;}
.rowLabel100{width: 100%;font-weight: normal;}
.sexSelect{
    width: 27%;
    height: 32px;
    padding-left: 10px;
    border: 1px solid #bfbfbf;
    border-radius: 3px;
}
.input-group span{display: inline-block;width: 70px;text-align: right;}
.width180{width: 230px;}
.width100{width: 85%;}
</style>
<div class="header">
    <span>组织管理</span>
    <span>/</span>
    <span>人员管理</span>
</div>
<div class="sideContent">
    <div class="btn-cont">
        <button id="addSideBtn" type="button" class="btn btn-default">添加人员</button>
    </div>
    <table class="table table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th class="w-1">编号</th>
                <th class="w-2">姓名</th>
                <th class="w-2">性别</th>
                <th class="w-2">年龄</th>
                <th class="w-2">联系电话</th>
                <th class="w-4">身份证号码</th>
                <th class="w-4">工作证号</th>
                <th class="w-4">家庭住址</th>
                <th class="w-4">职位</th>
                <th class="w-4">所属站点</th>
                <th class="w-4">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>21</td>
                <td>13123616650</td>
                <td>52272619954222458</td>
                <td>001</td>
                <td>贵阳省贵阳市南明区</td>
                <td>部门经理</td>
                <td>贵阳省贵阳市南明区国际中心站点</td>
                <td>
                    <a>修改</a>
                    <span>&nbsp;</span>
                    <a>删除</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="add-model">
    <div class="add-zhe"></div>
    <div class="add-input">
        <div class="input-group">
                <label class="rowLabel">
                    <span class="mr10">姓名:</span>
                    <input id="personName" type="text" placeholder="请填写姓名" maxlength="50">
                </label>
                <label class="rowLabel">
                    <span class="mr10">性别:</span>
                    <select class="sexSelect">
                        <option>男</option>
                        <option>女</option>
                    </select>
                </label>
        </div>
        <div class="input-group">
            <label class="rowLabel">
                <span class="mr10">年龄:</span>
                <input id="personSex" type="text" placeholder="请填写年龄" maxlength="50">
            </label>
            <label class="rowLabel">
                <span class="mr10">联系电话:</span>
                <input id="personTel" type="text" placeholder="请填写联系电话" maxlength="50">
            </label>
        </div>
        <div class="input-group">
            <label class="rowLabel">
                <span class="mr10">身份证号码:</span>
                <input id="personNum" type="text" placeholder="请填写身份证号码" maxlength="50">
            </label>
            <label class="rowLabel">
                <span class="mr10">工作证号:</span>
                <input id="personCard" type="text" placeholder="请填写工作证号" maxlength="50">
            </label>
        </div>
        <div class="input-group">
            <label class="rowLabel">
                <span class="mr10">家庭住址:</span>
                <input id="personAdress" type="text" placeholder="请填写家庭住址" maxlength="50">
            </label>
            <label class="rowLabel">
                <span class="mr10">职位:</span>
                 <select id="duty" class="sexSelect width180">
                    <option>部门经理</option>
                    <option>职位</option>
                </select>
            </label>
        </div>
        <div class="input-group">
            <label class="rowLabel100 ">
                <span class="mr10">所属站点:</span>
                 <select class="sexSelect width100">
                    <option>贵阳</option>
                    <option>南明区</option>
                </select>
            </label>
        </div>
        <div class="add-btn-cont">
             <button id="personSave" type="button" class="btn btn-primary mr50">确认</button>
             <button id="cancel" type="button" class="btn btn-default">取消</button>
        </div>
    </div>
</div>
<script>
$(function(){
    $("#textCity").click(function (e) {
        SelCity(this,e);
    });
    Side.init();
})

var Side = {
    init:function(){
        this.addEvent();
    },
    addEvent:function(){
        $("#addSideBtn").click(function(){
            $(".add-model").show();
        })
         $("#cancel").click(function(){
            $(".add-model").hide();
        })
    },
    saveEvent:function () {
        $("#personSave").click(function () {
            var personName = $("#personName").val();
            var sexSelect = $(".sexSelect option:selected").html();
            var personSex = $("#personSex").val();
            var personTel = $("#personTel").val();
            var personNum = $("#personNum").val();
            var personCard = $("#personCard").val();
            var personAdress = $("#personAdress").val();
            var duty = $("#duty option:selected").html();
        })
    },
}
</script>
<?php include(BASE_PATH . "/view/layout/adminFooter.phtml"); ?>